Accessibility Auditor Comprehensive guidance for creating accessible web experiences that comply with WCAG standards and serve users of all abilities effectively. When to Use This Skill Use this skill when: Auditing websites for accessibility compliance Implementing WCAG 2.1 Level AA or AAA standards Fixing accessibility violations and errors Testing with screen readers (NVDA, JAWS, VoiceOver) Ensuring keyboard navigation works correctly Implementing ARIA attributes and landmarks Preparing for ADA or Section 508 compliance audits Designing inclusive user experiences WCAG 2.1 Principles (POUR) 1. Perceivable Users must be able to perceive the information being presented. 2. Operable Users must be able to operate the interface. 3. Understandable Users must be able to understand the information and interface. 4. Robust Content must be robust enough to work with current and future technologies. Common Accessibility Issues & Fixes 1. Missing Alt Text for Images ❌ Problem: < img src = " /products/shoes.jpg "

✅ Solution:

< img src = " /products/shoes.jpg " alt = " Red Nike Air Max running shoes with white swoosh "

< img src = " /decorative-pattern.svg " alt = " " role = " presentation "

< a href = " / "

< img src = " /logo.png " alt = " Company Name - Home "

</ a

Rules: Informative images: Describe the content/function Decorative images: Use empty alt (alt="") Functional images: Describe the action Complex images: Provide detailed description nearby 2. Low Color Contrast ❌ Problem: / Contrast ratio 2.5:1 - Fails WCAG / .text { color :

767676

; background :

ffffff

; } ✅ Solution: / Contrast ratio 4.5:1+ - Passes AA / .text { color :

595959

; background :

ffffff

; } / Contrast ratio 7:1+ - Passes AAA / .text-high-contrast { color :

333333

; background :

ffffff

; } Requirements: Normal text (< 18px): 4.5:1 minimum (AA), 7:1 enhanced (AAA) Large text (≥ 18px or ≥ 14px bold): 3:1 minimum (AA), 4.5:1 enhanced (AAA) UI components and graphics: 3:1 minimum 3. Non-Semantic HTML ❌ Problem: < div class = " button " onclick = " submitForm ( ) "

Submit </ div

< div class = " heading "

Page Title </ div

< div class = " nav-menu "

... </ div

✅ Solution: < button type = " submit " onclick = " submitForm ( ) "

Submit </ button

< h1

Page Title </ h1

< nav aria-label = " Main navigation "

... </ nav

Semantic Elements: for buttons for links